<template>
  <div class="banner">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiperSlide :key='item.id' v-for="item in bannerInfo">
            <img :src="item.pic" :alt="item.tip" >
        </swiperSlide>
    </swiper>
    <div class="listWrap">
        <div>
            <img src="../../static/image/电台.png" alt="">
            <span>私人fm</span>
        </div>
        <div class="everyday">
            <span class="date">{{date}}</span>
            <img src="../../static/image/日历.png" alt="">
            <span>每日歌曲推荐</span>
        </div>
        <div>
            <img src="../../static/image/排行榜.png" alt="">
            <span>云音乐热歌榜</span>
        </div>
    </div>
  </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import { mapGetters, mapActions } from "vuex";
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: false,
        pagination: ".swiper-pagination",
        autoplay: true,
        effect: "fade"
      },
      bannerInfo: [
        {
          id: 1,
          tip: "获取图片失败"
        }
      ],
      date: ""
    };
  },
  mounted() {
    this.date = new Date().getDate();
    this.$http.get("http://localhost:3000/banner").then(data => {
      if (data.status === 200) {
        this.bannerInfo = data.data.banners;
      }
    });
  }
};
</script>
<style lang="less" scoped>
@rem :0.024275rem;
.banner {
  margin-bottom: 10*@rem;
  .swiper-slide {
    height: 180*@rem !important;
  }
  img {
    height: 180*@rem;
    width: 100%;
  }
}
.listWrap {
  display: flex;
  justify-content: space-around;
  align-items: center;
  div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    text-align: center;
    img {
      width: 60*@rem;
      height: 60*@rem;
    }
  }
  .everyday {
    position: relative;
    .date {
      position: absolute;
      top: 30*@rem;
      left: 26*@rem;
      color:red;
    }
  }
}
</style>

